<template>
    <u-popup :show="show" @close="show = false" mode="bottom" :round="10" :closeable="true">
        <view @touchmove.prevent.stop class="popup-common">
            <view class="title">请选择推荐会员</view>
            <view class="search-box box-border  h-[100rpx] bg-[#fff] mx-[var(--popup-sidebar-m)]">
                <view class="flex-1 search-input ">
                    <text @click.stop="searchNameFn"
                        class="nc-iconfont nc-icon-sousuo-duanV6xx1 btn !text-[28rpx]"></text>
                    <input class="input" type="text" v-model="searchName" :placeholder="'请输入会员ID/昵称姓名/手机'"
                        placeholderClass="text-[var(--text-color-light9)]" @confirm="searchNameFn">
                    <text v-if="searchName" class="nc-iconfont nc-icon-cuohaoV6xx1 clear" @click="clearFn"></text>
                </view>

            </view>
            <scroll-view scroll-y="true" class="h-[60vh] pt-[10rpx]">

                <view v-for="(item, index) in memberList" :key="item.id"
                    class="flex items-center mx-[var(--popup-sidebar-m)] border-1 border-[#eee] border-solid rounded-[var(--rounded-mid)] px-[var(--pad-sidebar-m)] "
                    :class="{
                        'mb-[var(--top-m)]': memberList.length - 1 != index, 'text-[var(--primary-color)] !border-[var(--primary-color)]': member.filter((ele) => {
                            return ele.id == item.id
                        }).length
                    }" @click="selectMember(item)">
                    <view class="flex items-center w-[100%] py-[20rpx]">
                        <view class="w-[100rpx] h-[100rpx] rounded-[8rpx] relative">
                            <image
                                :src="item.avatar || 'https://files.meton.vip/2310e2533cff85c0f22420d6b0950a372b769f45ed8a720cfbd9597a5fdd5c42.png'"
                                class="w-[100rpx] h-[100rpx]"></image>
                            <image class="w-[20rpx] h-[20rpx] absolute right-0 bottom-0"
                                :src="item.sex == 1 ? 'http://files.meton.vip/09d8d7f71c0df8949ea6922aedd3026cb70db9ba50fe748d969a96e537f18f39.png' : 'http://files.meton.vip/c5c240342d2925853f957ce6a4b5b98f0ecfeadbd500aed3424ad0f733ee7c0f.png'">

                            </image>
                        </view>
                        <view class="flex-1  flex items-center ml-[20rpx]  box-border py-[30rpx] border-0">
                            <view class="flex-1">
                                <view class="text-[32rpx] text-[#333] font-bold truncate max-w-[500rpx] ">{{
                                    item.nickname }}（{{
                                        item.id }}）<text class="text-[26rpx]">
                                        {{ mobileConceal(item.mobile) }}
                                    </text></view>

                            </view>
                        </view>
                    </view>

                </view>
                <view v-if="!memberList || memberList && !memberList.length"
                    class="text-[var(--text-color-light6)] text-[28rpx] text-center">暂无会员</view>

            </scroll-view>
            <view class="btn-wrap">
                <button class="primary-btn-bg btn" @click="confirm">确认</button>
            </view>
        </view>
    </u-popup>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'

import { getUserPage } from '@/app/api/shopMember';

import { mobileConceal } from '@/utils/common';

const memberList = ref<object[]>([])
const show = ref(false)
const member = ref<any[]>([])
const emits = defineEmits(['confirm'])

const prop = defineProps({
    isRadio: {
        type: Boolean,
        default: false
    }
})



const searchName = ref()

const open = (employeeStr: any) => {
    show.value = true
    if (!memberList.value.length) {
        let data = {
            pageNo: 1,
            pageSize: 200,
            mobile: searchName.value,
            status: 0,
        };
        getUserPage(data).then(({ data }) => {
            console.log(data)

            memberList.value = data.list


        }).catch()
    }
    member.value = employeeStr

}

const selectMember = (data: object) => {

    if (prop.isRadio) {
        member.value = []
    }

    if (!member.value.filter((ele) => {
        return ele.id == data.id
    }).length) {
        member.value.push(data)
    } else {
        member.value = member.value.filter((ele) => {
            return ele.id != data.id
        });
    }
}
const searchNameFn = () => {
    let data = {
        pageNo: 1,
        pageSize: 200,
        mobile: searchName.value,
        status: 0,
    };
    getUserPage(data).then(({ data }) => {
        console.log(data)

        memberList.value = data.list


    }).catch()

}
const clearFn = () => {
    searchName.value = undefined;
    searchNameFn()
}
const confirm = () => {
    emits('confirm', member.value)
    show.value = false
}

defineExpose({
    open,
    memberList
})
</script>

<style lang="scss" scoped></style>
